<!--
 * @Description: 
 * @Author: Cxy
 * @Date: 2025-02-23 18:03:16
 * @LastEditors: Cxy
 * @LastEditTime: 2025-08-21 20:52:59
 * @FilePath: \xy-admin\docs\.vitepress\plugin\tooltip\index.vue
-->
<script setup lang="ts">
import { ElTooltip } from 'element-plus'

defineProps({
  type: String,
  details: String
})
</script>

<template>
  <span class="vp-tooltip-container">
    <code>
      {{ type }}
    </code>
    <ClientOnly>
      <ElTooltip v-if="details" effect="light" trigger="click">
        <svg class="doc-icon" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24">
          <g class="alert-outline">
            <g fill="currentColor" class="Vector">
              <path
                fill-rule="evenodd"
                d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2s10 4.477 10 10m-10 8a8 8 0 1 0 0-16a8 8 0 0 0 0 16"
                clip-rule="evenodd"
              />
              <path fill-rule="evenodd" d="M12 14a1 1 0 0 1-1-1V8a1 1 0 1 1 2 0v5a1 1 0 0 1-1 1" clip-rule="evenodd" />
              <path d="M11 16a1 1 0 1 1 2 0a1 1 0 0 1-2 0" />
            </g>
          </g>
        </svg>
        <template #content>
          <code
            style="
              color: var(--vp-code-color);
              background-color: var(--vp-code-bg);
              border-radius: 4px;
              padding: 3px 6px;
            "
          >
            {{ details }}
          </code>
        </template>
      </ElTooltip>
    </ClientOnly>
  </span>
</template>

<style lang="scss" scoped>
.vp-tooltip-container {
  white-space: nowrap;

  :deep(.el-only-child__content.el-tooltip__trigger.el-tooltip__trigger) {
    display: inline-block;
    vertical-align: middle;

    .doc-icon {
      margin-left: 4px;
      border-radius: 4px;
      padding: 3px;
      transition:
        color 0.25s,
        background-color 0.5s;

      &:hover {
        color: var(--vp-c-brand-1);
        background-color: var(--vp-code-bg);
      }
    }
  }
}
</style>
